<template>
  <div :class="meanClassList" @click="handleMean">
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
  </div>
</template>
<script setup>
import {computed, onMounted, ref, toRefs} from "vue";

defineOptions({name: "MeanButtonIndex"})
const emit = defineEmits(['meanClick'])
const props = defineProps({
  MenuBar: {
    type: String,
    default: 'white'
  }
})
const {MenuBar} = toRefs(props);
const meanClassList = ref(['menu-button'])
function handleMean() {
  emit('meanClick')
  handleChangeClass()
}
// 添加和删除样式
function handleChangeClass() {
  /** 判断是否只有一个参数
   1，1个参数则数组添加改变样式
   2，否则判断是否已经添加过这个参数了，然后删除 **/
  if (meanClassList.value.length === 1) {
    meanClassList.value.push('cross')
  } else {
    let index = meanClassList.value.indexOf("cross");
    if (index !== -1) {
      meanClassList.value.splice(index, 1);
    }
  }
}
</script>

<style scoped lang="scss">
.menu-button {
  cursor: pointer;
}
.bar {
  --MeanBarClass:v-bind(MenuBar);
  width: 1.5rem;
  height: 0.1rem;
  margin: 0.5rem auto;
  border-radius: 10px;
  background-color: var(--MeanBarClass);
  transition: 0.3s;
}
.menu-button:hover .bar:nth-of-type(1) {
  -ms-transform: translateY(1.5px) rotate(-4.5deg);
  transform: translateY(1.5px) rotate(-4.5deg);
}
.menu-button:hover .bar:nth-of-type(2) {
  opacity: 0.9;
}
.menu-button:hover .bar:nth-of-type(3) {
  -ms-transform: translateY(-1.5px) rotate(4.5deg);
  transform: translateY(-1.5px) rotate(4.5deg);
}
.cross .bar:nth-of-type(1) {
  -ms-transform: translateY(0.6rem) rotate(-45deg);
  transform: translateY(0.6rem) rotate(-45deg);
}
.cross .bar:nth-of-type(2) {
  opacity: 0;
}
.cross .bar:nth-of-type(3) {
  -ms-transform: translateY(-0.6rem) rotate(45deg);
  transform: translateY(-0.6rem) rotate(45deg);
}
.cross:hover .bar:nth-of-type(1) {
  -ms-transform: translateY(1.1rem) rotate(45deg);
  transform: translateY(1.1rem) rotate(45deg);
}
.cross:hover .bar:nth-of-type(2) {
  opacity: 0;
}

.cross:hover .bar:nth-of-type(3) {
  -ms-transform: translateY(-1.1rem) rotate(-45deg);
  transform: translateY(-1.1rem) rotate(-45deg);
}
</style>

